import React, { useState, useMemo, ChangeEvent } from 'react'
import { PageProps } from "@/interfaces/app.interface"
import { regxPass2, regxSPhone } from '@/utils/regexp.func'
import style from './index.less'
import {useHistory} from 'umi'
import {forget, getKey, sendCode} from '@/api'


const forgetPage = (prop: {cb: Function}) => {

    let [step, setStep] = useState(0)
    let [user, setUser] = useState('')
    let [pass, setPass] = useState('')
    let [pass2, setPass2] = useState('')
    let [code, setCode] = useState('')
    let [errmsg, setErrmsg] = useState('')
    let [sendmsg, setSendmsg] = useState('发送验证码')
    let [issend, setIssend] = useState(false)
    let [type, setType] = useState('')
    let [key, setKey] = useState('')
    let mark = useMemo(() => {
        return user && code && !type
    }, [user, code, type])
    let status = useMemo(() => {
        return pass && pass === pass2
    }, [pass, pass2])

    const blur = (num: number) => (e: ChangeEvent<HTMLInputElement>) => {
        let { value } = e.target
        if (num === 0) {
            if (!regxSPhone.test(value)) {
                setErrmsg('请输入正确的手机号')
                setType('user')
            }
        } else if (num == 2) {
            if (!regxPass2.test(value)) {
                setErrmsg('请输入正确的字符')
                setType('pass')
            }
        } else if (num == 3) {
            if (value !== pass) {
                setErrmsg('密码不一致')
                setType('pass')
            }
        }

    }

    const change = (num: number) => (e: ChangeEvent<HTMLInputElement>) => {
        let { value } = e.target

        if (num === 0) {
            setUser(value)
        } else if (num === 1) {
            setCode(value)
        } else if (num == 2) {
            setPass(value)
        } else {
            setPass2(value)
        }
        setType('')
    }
    // 发送验证码
    const send = () => {
        if (issend) return
        if (!user || !regxSPhone.test(user)) {
            setErrmsg('请输入正确的手机号')
            setType('user')
            return
        }
        setIssend(true)
        sendCode({mobile: user, type: 2}).catch(err => {
            setErrmsg(err)
            setType('user')
        })
        let time = 60
        setSendmsg(`正在发送中 ${time} s`)
        let timer = setInterval(() => {
            if (time > 1) {
                time--;
                setSendmsg(`正在发送中 ${time} s`)
            } else {
                clearInterval(timer);
                setSendmsg(`发送验证码`)
                setIssend(false)
            }
        }, 1000);

    }

    const next = () => {
        getKey({mobile: user, verificationCode: code}).then(res => {
            console.log(res)
            setKey(res)
            setStep(1)
        })
        
    }
    // 忘记密码
    const submit = () => {

        if (status) {
            forget({secretKey: key, passWord: pass,}).then(res => {
                prop.cb('login')
            })
        }
    }

    return <div className={style.contain}>
        <div className={style.forget}>
            <div className={style.cls} onClick={()=>prop.cb('')}>&times;</div>
            <div className={`flex-center ${style.top}`}>
                <div className={step == 0 ? style.on : ''}>重置密码</div>
                <img src={require('@/assets/img/login/icon.png')} alt=""/>
                <div className={step == 1 ? style.on : ''}>设置密码</div>
            </div>

            <div className={style.form}>
                <div className={`flex-start ${style.error}`} hidden={!(errmsg)}>
                    <img src={require('@/assets/img/warn.png')} alt="" />
                    <div>{errmsg}</div>
                </div>

                {
                    step == 0
                        ? <>
                            <div className={style.input}>
                                <input type="text" key="tel" maxLength={11} className={type == 'user' ? style.err : ''} placeholder="手机号/姓名" onChange={change(0)} onBlur={blur(0)} />
                            </div>

                            <div className={`${style.input} flex`}>
                                <input type="text" maxLength={6} key="code" className={style.code} placeholder="验证码" onChange={change(1)} />
                                <div className={`${style.send} ${issend ? style.none : ''}`} onClick={send}>{sendmsg}</div>
                            </div>

                            <div className={`${style.submit} ${mark ? style.on : ''} `} onClick={next}>下一步</div>
                        </>

                        : <>
                            <div className={style.input}>
                                <input type="password" key="psas" className={type == 'pass' ? style.err : ''} placeholder="长度8-14个，字母/数字以及标点符号至少包含2种" onChange={change(2)} onBlur={blur(2)} />
                            </div>
                            <div className={style.input}>
                                <input type="password" key="pass2" className={type == 'pass' ? style.err : ''} placeholder="请再次输入重复密码" onChange={change(3)} onBlur={blur(3)} />
                            </div>

                            <div className={`${style.submit} ${status ? style.on : ''} `} onClick={submit}>完成</div>
                        </>
                }

            </div>
        </div>
    </div>
}


export default forgetPage